<template>
	<view class="content">
		<!-- 轮播 -->
		<!-- <swiper class="swiper" autoplay="true">
			<swiper-item v-for="(item, index) in storeDetail.activity_logo" :key="index">
				<image mode="widthFix" class="swpimg" :src="item"></image>
			</swiper-item>
		</swiper> -->
		<image class="swpimg" mode="widthFix" :src="storeDetail.activity_logo"></image>
		<view class="name">{{storeDetail.activity_name}}</view>
		<view class="optBox">
			<text :class="'opt'+index" v-for="(item,index) in storeDetail.open_hours" :key="index">{{item}}</text>
		</view>
		<view class="mapBox">
			<view class="maptext">{{storeDetail.address}}</view>
			<view class="btnbox">
				<image @click="callphone(storeDetail.phone)" src="../../static/call.png" mode="widthFix" class="call">
				</image>
				<image @click="addmap(storeDetail.latitude,storeDetail.longitude)" src="../../static/dh.png"
					mode="widthFix" class="dh"></image>
			</view>
		</view>
		<view class="nodeBox" v-if="storeDetail.agent_id==1" :style="{backgroundImage:'url('+backurl1+')'}">
			<view class="nodebg"></view>
			<view class="jsoncontent">
				<rich-text class="txtrichs" :nodes="storeDetail.content"></rich-text>
			</view>
		</view>
		<view class="nodeBox" v-if="storeDetail.agent_id==2" :style="{backgroundImage:'url('+backurl2+')'}">
			<view class="nodebg"></view>
			<view class="jsoncontent">
				<rich-text class="txtrichs" :nodes="storeDetail.content"></rich-text>
			</view>
		</view>
		<!-- <view class="nodeBox" :style="{backgroundImage:'url('+item.agent_id==1? backurl:backurl0+')'}">
			<view class="nodebg"></view>
			<view class="jsoncontent">
				<rich-text class="txtrichs" :nodes="storeDetail.content"></rich-text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeDetail: [],
				store_id: '1',
				backurl: '../../static/lis1.png',
				backurl0: '../../static/lis2.png',
				backurl1: 'https://vip.helloimg.com/images/2023/11/15/ovOIBM.png',
				backurl2: 'https://vip.helloimg.com/images/2023/11/15/ovO7zg.png',


			}
		},
		onLoad(e) {
			var that = this;
			that.store_id = e.store_id;
			that.API_storeDetail();
		},
		methods: {
			callphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				})
			},
			addmap(lat, lon) {
				var that = this;
				console.log(lat, lon)
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lon),
					name: that.storeDetail.activity_name,
					address: that.storeDetail.address,
				})
			},
			API_storeDetail() {
				var that = this;
				that.ran
					.request('index/Home/storeDetail', {
						store_id: that.store_id,
					})
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							that.storeDetail = res.data;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},

		}
	}
</script>

<style lang="scss">
	.nodeBox {
		width: 750rpx;
		padding: 20rpx 0;
		// height: 500rpx;
		// background: #fff;
		margin-bottom: 100rpx;
		background-color: #fff;
		// background: url('https://vip.helloimg.com/images/2023/11/15/ov90Zm.png') #fff no-repeat top center;
		background-size: 750rpx;
		// justify-content: space-between;
		position: relative;

		.jsonbg {
			width: 750rpx;
			position: absolute;
		}
	}

	.nodebg {
		width: 750rpx;
		height: 120rpx;
	}

	.jsoncontent {
		color: #333 !important;
		font-size: 28rpx !important;
		line-height: 1.5 !important;
		// position: absolute;
		margin: 20rpx 70rpx 50rpx;
		padding: 20rpx 30rpx 20rpx;


		// box-shadow: 2rpx 2rpx 2rpx #f2f2f2;

	}




	.di1 {
		display: block;
		width: 750rpx;
		padding-top: 40rpx;
	}



	.mapBox {
		background: #fff;
		padding: 0 20rpx 20rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		justify-items: center;
		margin-bottom: 20rpx;

		.maptext {
			margin-right: 20rpx;
			color: #666;
		}

		.btnbox {
			display: flex;
			align-items: center;

			.call {
				width: 68rpx;
				float: right;
				margin-right: 20rpx;
			}

			.dh {
				width: 80rpx;
				float: right;
			}
		}


	}

	.name {
		background: #fff;
		padding: 20rpx;
	}

	.optBox {
		background: #fff;
		padding: 0 20rpx 20rpx;
		color: #fff;

		text {
			border-radius: 6rpx;
			padding: 0 14rpx;
			line-height: 30rpx;
			font-size: 24rpx;
			margin-right: 10rpx;
		}

		.opt0 {
			background: #00aaff;
		}

		.opt1 {
			background: #ffaa00;
		}

		.opt2 {
			background: #00cc00;
		}

		.opt3 {
			background: #00aaff;
		}

		.opt4 {
			background: #ffaa00;
		}

		.opt5 {
			background: #00cc00;
		}

		.opt6 {
			background: #00aaff;
		}

		.opt7 {
			background: #ffaa00;
		}

		.opt8 {
			background: #00cc00;
		}

		.opt9 {
			background: #00aaff;
		}

		.opt10 {
			background: #ffaa00;
		}

		.opt11 {
			background: #00cc00;
		}
	}

	page {
		background: #f2f2f2;
	}

	.swiper {
		width: 750upx;
		height: 350upx;


	}

	.swpimg {
		width: 750upx;
		height: 350upx;
		display: block;
	}

	.shopBox {
		width: 730rpx;
		margin-left: 20rpx;
		overflow: hidden;
		border-radius: 20rpx;

		.shop {
			width: 345rpx;
			float: left;
			margin-right: 20rpx;
			margin-top: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			padding-bottom: 20rpx;

			image {
				width: 345rpx;
				border-radius: 20rpx 20rpx 0 0;
			}

			.shopname {
				padding: 0 20rpx;
				text-align: justify;
			}

			.address {
				font-size: 26rpx;
				padding: 0 20rpx;
				color: #666;
				margin: 10rpx 0;
			}

			.latlon {
				padding: 0 20rpx;
				font-size: 26rpx;
			}
		}
	}

	.topbg {
		width: 750rpx;
		height: 139rpx;
	}

	.topBox {
		width: 710rpx;
		padding: 0 20upx;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999999;
		background: #fff;

		.searchBox {
			width: 660upx;
			height: 80upx;
			overflow: hidden;
			float: left;
			background: #fff;
			border-radius: 40upx;
			padding: 0 20upx;
			margin: 30upx 0;
			background: #eee;

			.input {
				width: 500upx;
				float: left;
				height: 80upx;
				line-height: 80upx;
				padding: 0 15upx;

			}

			.red_search {
				width: 40upx;
				height: 40upx;
				float: left;
				margin-top: 20upx;
			}
		}


	}
</style>